<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="library/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.css">
    <style>
        #map{
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="library/jquery-3.1.1.min.js"></script>
<script src="library/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.min.js"></script>
<script src="library/jquery-jvectormap-2.0.3/china.js"></script>

<script type="text/javascript">

    $(function() {
        /*id为中国省份标识符，name为对应省份名称，两者固定。*/
        var dataStatus = [
            {id:"CN-32",name:"江苏"},
            {id:"CN-52",name:"广州"},
            {id:"CN-53",name:"云南"},
            {id:"CN-50",name:"重庆"},
            {id:"CN-51",name:"四川"},
            {id:"CN-31",name:"上海"},
            {id:"CN-54",name:"西藏"},
            {id:"CN-33",name:"浙江"},
            {id:"CN-15",name:"内蒙古"},
            {id:"CN-14",name:"山西"},
            {id:"CN-",name:"福建"},
            {id:"CN-12",name:"天津"},
            {id:"CN-13",name:"河北"},
            {id:"CN-11",name:"北京"},
            {id:"CN-34",name:"安徽"},
            {id:"CN-36",name:"江西"},
            {id:"CN-37",name:"山东"},
            {id:"CN-41",name:"河南"},
            {id:"CN-43",name:"湖南"},
            {id:"CN-42",name:"湖北"},
            {id:"CN-45",name:"广西"},
            {id:"CN-44",name:"广东"},
            {id:"CN-46",name:"海南"},
            {id:"CN-65",name:"新疆"},
            {id:"CN-64",name:"宁夏"},
            {id:"CN-63",name:"青海"},
            {id:"CN-62",name:"甘肃"},
            {id:"CN-61",name:"陕西"},
            {id:"CN-23",name:"黑龙江"},
            {id:"CN-22",name:"吉林"},
            {id:"CN-21",name:"辽宁"}
        ];

        var selectedTargets= [];

        var ChinaMap = new jvm.Map({
            map: 'cn_merc',
            container:$("#map"),
            regionsSelectable: true,
            markersSelectable: true,
            regionStyle: {
                initial: {
                    fill: '#39ac90',
                    "fill-opacity": 1,
                    stroke: 'none',
                    "stroke-width": 0,
                    "stroke-opacity": 1
                },
                hover: {
                    "fill-opacity": 0.8,
                    cursor: 'pointer'
                },
                selected: {
                    fill: 'yellow'
                },
                selectedHover: {
                }
            },
            markers:[
                {latLng:[23.804,120.961454],name:"台湾"},
                {latLng:[22.281089,114.171994],name:"香港"},
                {latLng:[22.192961,113.5494],name:"澳门"}
            ],
            markerStyle: {
                initial: {
                    fill: '#F8E23B',
                    stroke: '#383f47'
                }
            },
            labels:{
                regions:{
                    render:function(code){
                        return dataStatus[code]
                    }
                }
            },
             //Tip显示各地区名称
             onRegionTipShow: function (event, el, code) {
                 $.each(dataStatus, function (i,items) {
                     if (code == items.id) {
                         el.html(items.name)
                     }
                 });
             },
            //
             onRegionSelected: function(event, code){
                 var currentRegion = ChinaMap.tip.text(),
                     selectedTargetIndex = selectedTargets.indexOf(currentRegion);
                 if( selectedTargetIndex >= 0){
                     selectedTargets.splice(selectedTargetIndex,1)
                 }else{
                     selectedTargets.push(currentRegion)
                 }
                 console.log(selectedTargets)
                 console.log(ChinaMap.getSelectedRegions())
                 },
             onMarkerSelected: function(event, code,isSelected){
                 var currentMaker = ChinaMap.markers[code].config.name,
                     selectedTargetIndex = selectedTargets.indexOf(currentMaker);
                 if( selectedTargetIndex >= 0){
                     selectedTargets.splice(selectedTargetIndex,1)
                 }else{
                     selectedTargets.push(currentMaker)
                 }
                 console.log(selectedTargets)
             }
        });
    });
</script>
</body>
</html>